<template>
  <div class="weather-container">
    <div class="alert">
      <p class="weather-title">
        你正在预览武汉市的天气信息，可以通过右上角的"+"号按钮保存起来
      </p>
    </div>

    <div class="weather-info">
      <div class="info-item">
        <span class="label">当日气温是：</span>
        <span class="value">{{ liveWeather.temperature }}摄氏度</span>
      </div>
      <div class="info-item">
        <span class="label">当日天气是：</span>
        <span class="value">{{ liveWeather.weather }}</span>
      </div>
      <div class="info-item">
        <span class="label">当日风向是：</span>
        <span class="value">{{ liveWeather.winddirection }}</span>
      </div>
      <div class="info-item">
        <span class="label">当日风力是：</span>
        <span class="value">{{ liveWeather.windpower }}级</span>
      </div>
    </div>

    <div class="forecast-container">
      <div class="forecast-grid" v-if="forecast.length > 0">
        <div class="forecast-item">
          <div class="date">今天</div>
          <div class="sub-date">{{ forecast[0].date.slice(5) }}</div>
          <div class="weather">{{ forecast[0].dayweather }}</div>
          <div class="wind">风力 {{ forecast[0].daypower }}级</div>
        </div>
        <div class="forecast-item">
          <div class="date">明天</div>
          <div class="sub-date">{{ forecast[1].date.slice(5) }}</div>
          <div class="weather">{{ forecast[1].dayweather }}</div>
          <div class="wind">风力 {{ forecast[1].daypower }}级</div>
        </div>
        <div class="forecast-item">
          <div class="date">
            周{{
              ["日", "一", "二", "三", "四", "五", "六", "日"][forecast[2].week]
            }}
          </div>
          <div class="sub-date">{{ forecast[2].date.slice(5) }}</div>
          <div class="weather">{{ forecast[2].dayweather }}</div>
          <div class="wind">风力 {{ forecast[2].daypower }}级</div>
        </div>
        <div class="forecast-item">
          <div class="date">
            周{{
              ["日", "一", "二", "三", "四", "五", "六", "日"][forecast[3].week]
            }}
          </div>
          <div class="sub-date">{{ forecast[3].date.slice(5) }}</div>
          <div class="weather">{{ forecast[3].dayweather }}</div>
          <div class="wind">风力 {{ forecast[3].daypower }}级</div>
        </div>
      </div>
      <div class="temperature-chart">
        <v-chart :option="option"></v-chart>
        <!-- 图表将在这里渲染 -->
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { getWeather, getWeatherForecast } from "../api/index.js";
import { useRoute } from "vue-router";
import { useWeatherStore } from '../stores/weatherStore'

const route = useRoute();
const weatherStore = useWeatherStore()
const option = ref({});
const renderChart = (data, data1) => {
  option.value = {
    xAxis: {
      show: false, // 隐藏x轴
      type: "category", // 类型为类目轴
      boundaryGap: false,
    },
    yAxis: {
      show: false, // 隐藏y轴
      type: "value", // 类型为数值轴
    },
    series: [
      {
        name: "白天温度", // 系列名称
        type: "line", // 折线图
        smooth: true, // 平滑曲线
        data: data, // 数据
        itemStyle: {
          color: "rgb(84,112,198)", // 设置折线颜色
          borderWidth: 2, // 设置折线边框宽度
        },
        label: {
          show: true, // 显示标签
          position: "top", // 标签位置
          color: "white", // 标签颜色
          fontSize: 12, // 字体大小
          formatter: "白{c}°C", // 显示内容
        },
      },
      {
        name: "夜间温度", // 系列名称
        type: "line", // 折线图
        smooth: true, // 平滑曲线
        data: data1, // 数据
        itemStyle: {
          color: "rgb(145, 204, 117)",

          borderWidth: 2, // 设置折线边框宽度
        },
        label: {
        show: true,
        position: 'bottom',
        color: 'white',
        fontSize: 12,
        formatter: '晚{c}°C'
      }
      },
    ],
  };
};
const liveWeather = ref({});
const forecast = ref([]);
const dayTemperature = ref([]);
const nightTemperature = ref([]);
const adcode = route.params.id;
onMounted(async () => {
  const res = await getWeather(adcode);
  const res1 = await getWeatherForecast(adcode);
  console.log(res);
  city.value = res.lives[0].city;
  liveWeather.value = res.lives[0];
  forecast.value = res1.forecasts[0].casts;
  weatherStore.setCityInfo(city.value, adcode)
  // 将每个forecast里的temperature提取出来
  forecast.value.forEach((item) => {
    dayTemperature.value.push(item.daytemp);
    nightTemperature.value.push(item.nighttemp);
  });
  renderChart(dayTemperature.value, nightTemperature.value);

});


const city = ref(); 
</script>

<style lang="scss" scoped>
.weather-container {
  //   padding: 20px;
  color: white;
  .alert {
    background-color: #04556e;
    padding: 20px;
    box-shadow: #032a36;
    margin-bottom: 20px;
    width: 100%;
    .weather-title {
      font-size: 16px;
      text-align: center;
    }
  }

  .weather-info {
    .info-item {
      margin: 15px 0;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 16px;

      .label {
        margin-right: 10px;
      }

      .value {
        color: #fff;
      }
    }
  }

  .forecast-container {
    background-color: rgb(0, 78, 113);
    border-radius: 8px;
    padding: 20px;
    margin: 20px 150px;

    .forecast-grid {
      display: flex;
      justify-content: space-between;
      margin-bottom: 30px;

      .forecast-item {
        text-align: center;
        flex: 1;

        .date {
          font-size: 16px;
          margin-bottom: 8px;
        }

        .sub-date {
          font-size: 14px;
          color: rgba(255, 255, 255, 0.8);
          margin-bottom: 12px;
        }

        .weather {
          font-size: 16px;
          margin-bottom: 8px;
        }

        .wind {
          font-size: 14px;
          color: rgba(255, 255, 255, 0.8);
        }
      }
    }

    .temperature-chart {
      height: 200px;
      width: 100%;
      // 为图表预留空间
    }
  }
}
</style>
